<template>
    <div id="root" ref="root">
        <div>
            <div class="fa  fa-minus-square-o camera me" ><br><span id="sao">扫一扫</span></div>
        </div>
        <div class="search">
            <div class="fa fa-search sech"></div>
            <input type="text" placeholder="搜一搜" ref="inp" @input="scarchChange" @blur="searchBlur">
            <div id="box" v-show="boxShow">
                <div v-for="(s,i) in searchThen" :key="i"><router-link :to="'/product/'+s._id">{{s.nameOfGoods}}</router-link></div>
            </div>
            
        </div>
        <div>
            <div class="fa fa-commenting-o camera me" ><br>消息</div>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    props:[
        "scrollMove"
    ],
    computed:{
        ...mapState([
            "searchThen"
        ])
    },
    watch:{
        scrollMove:function(n){
            if(n>100){
                this.$refs.root.style.backgroundColor = "gold";
            }else{
                this.$refs.root.style.backgroundColor = "rgba(0,0,0,0)";
            }
        }
    },
    data:function(){
        return {
            boxShow:false,
        }
    },
    methods: {
        scarchChange(e){
            if(e.target.value==""){
                this.boxShow = false;
            }else{
                this.boxShow = true;
                this.$store.dispatch("requestScarch",{nameOfGoods:e.target.value});
            }
            
        },
        searchBlur(){
            setTimeout(()=>{
                this.boxShow = false;
            },200)
            
        },
    }
}
</script>
<style scoped>
    
    
    #root{
        position: fixed;
        display: flex;
        justify-content: space-between;
        text-align: center;
        width: 100%;
        height: 44px;
        line-height: 44px;
        left: 0;
        top: 0;
        color: white;
        
    }
    .camera{
        font-size: 10px;
        margin: 0 12px;
    }
    .search{
        width: 65%;
        height: 20px;
        position: relative;
    }
    input{
        width: 100%;
        height: 100%;
        border-radius: 10px;
        /*padding: 10px;*/
        padding-left: 25px;
    }
    .sech{
        position: absolute;
        color: #999999;
        left: 8px;
        top: 15px;
    }
    #sao{
        color: black;
    }
    .me{
        color: #000;
    }
    #box{
        position: absolute;
        background-color: #fff;
        width: 100%;
        border: solid 1px black;
        margin-top: -8px;
        border-radius: 5px;
        color: black;

    }
    #box div{
        line-height: 30px;
        height: 30px;   
        overflow: hidden;
        white-space: nowrap;
        
    }
    a{
        text-decoration: none;
    }
</style>